{% extends './common/layout.njk' %}
{% set cards = [
    {"alt":'css-sprite.jpg',
        "img":'/public/img/index/css-sprite.jpg',
        "title":'雪碧图生成工具',
        "href": '/css_sprite',
        describe: '在线制作雪碧图工具，可以自定义多个参数，并可以编辑css模板并导出css。'
    },{
        alt: 'regexper.jpg',
        img: '/public/img/index/regexper.jpg',
        title: '正则可视化工具',
        href: '/regexper',
        describe: '在输入框输入JavaScript风格的正则表达式，点击display按钮，下方即可用图形的方式表示出来。功能来自https://regexper.com'
    },{
        alt: 'matrix3d.jpg',
        img: '/public/img/index/matrix3d.jpg',
        title: '快速获取matrix3d',
        href: '/matrix3d',
        describe: '一个可以快速获取css matrix3d值的小工具。可以设置参考图片，然后拖拽四个黑点来进行matrix3d变换，右侧会实时得出结果。'
    }]
%}
{% block body %}
    <div class="index app">
        <div class="container-fluid">
            <div class="alert alert-warning" role="alert">建议使用最新版chrome访问，其它浏览器不保证功能可用！</div>
            <div class="row">
                {% for card in cards %}
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <div class="card">
                            <a href="{{ card.href }}" class="card-link"><img class="card-img-top" src="{{ card.img }}"
                                                           alt="{{ card.alt }}"></a>
                            <div class="card-body">
                                <h5 class="card-title">{{ card.title }}</h5>
                                <p class="card-text">{{ card.describe }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}